<template>
    <div>
        <!--    全屏容器    -->
        <div ref="pageDiv" @mousemove="demo_move" @mouseup="demo_up"
             v-show="menuFlag"
             :class="{'zlevelTop':mouseDownState}"
             style="position: absolute;top: 0;right:0;height: 100%;">
            <!--  点击蒙版  -->
            <div v-if="menuOpen"  @click.stop="closeOpenModal"
                 style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999998">
            </div>
            <!--  多功能菜单 -->
            <div :class="{'six-more-modal-btn':menuOpen,'moreModal':!menuOpen,'more-tran-animate':!mouseDownState}"
                 ref="actionMgr" :style="position"  @mousedown="demo_down" @dblclick.stop="showMenu">

                <!-- 展开-->
                <div v-show="menuOpen"  class="list-modal" style="height: 100%">
                    <el-tabs v-if="settime" stretch v-model="activeName" @tab-click="handleClick" >
                        <el-tab-pane label="待办" name="a">
                            <div style="padding: 8px 4px 8px 4px;background: #FFFFFF">
                                <el-button @click="handle" type="primary" size="mini" style="float: right;margin: 0px 0 5px 0" :loading="btnLoading">{{ btnLoading ? '办理中 ...' : '一键办理' }}</el-button>

                                <el-input
                                        size="mini"
                                        placeholder="请输入搜索内容"
                                        suffix-icon="el-icon-search"
                                        @keyup.enter.native="dbSearch"
                                        v-model="searcha">
                                </el-input>
                            </div>

                            <el-card class="box-card infinite-list-wrapper" style="height: 500px;overflow-y: auto;background: #F5F7FA;"
                                     >
                                    <div v-for="(item,index) in upcomingData" :key="index" class="text" @click="toPage(item,index)" ref="listItem">
                                        <div class="listHeader">
                                            <el-badge :is-dot="true" class="badge" :max="99">
                                                <div class="listTittle">{{item.title}}</div>
                                            </el-badge>
                                        </div>
                                            <div class="listTime" style="width: 100%;text-align: left;">{{item.sendTime}}</div>
                                        <div class="listBody">
                                            {{item.content}}
                                        </div>
                                    </div>

                                <p v-if="loading" style="text-align: center">加载中...</p>
                                <p v-if="noMore"  style="text-align: center">{{upcomingData.length==0?'暂无数据':'没有更多了'}}</p>
                                <div v-if="!loading&&!noMore" style="width: 100%;background: white;text-align: center;padding: 8px 0 8px 0;cursor: pointer" @click="load">加载更多</div>
                            </el-card>
                        </el-tab-pane>
                        <el-tab-pane label="已办" name="b">
                            <div style="padding: 8px 4px 8px 4px;background: #FFFFFF">
                                <el-input
                                        size="mini"
                                        placeholder="请输入搜索内容"
                                        suffix-icon="el-icon-search"
                                        @keyup.enter.native="ybSearch"
                                        v-model="searchb">
                                </el-input>
                            </div>

                            <el-card class="box-card" style="height: 500px;overflow-y: auto;background: #F5F7FA;"
                                    >
                                <div v-for="(item,index) in handleData" :key="index" class="text" @click="toPage(item,index)">
                                    <div class="listHeader">
                                            <div class="listTittle">{{item.title}}</div>
                                    </div>
                                    <div class="listTime" style="width: 100%;text-align: left;">{{item.sendTime}}</div>
                                    <div class="listBody">
                                        {{item.content}}
                                    </div>
                                </div>
                                <p v-if="loading" style="text-align: center">加载中...</p>
                                <p v-if="noMoreb"  style="text-align: center">{{handleData.length==0?'暂无数据':'没有更多了'}}</p>
                                <div v-if="!loading&&!noMoreb" style="width: 100%;background: white;text-align: center;padding: 8px 0 8px 0;cursor: pointer" @click="load">加载更多</div>
                            </el-card>
                        </el-tab-pane>
                    </el-tabs>

                </div>
                <!--  触发器 -->
                <div v-if="!menuOpen"  class="imgMore" >
<!--                    <i class="el-icon-s-promotion" style="color:rgb(70 183 137);font-size: 42px"></i>-->
<!--                    <img class="more-img" src="../../assets/icon/icon1.png" alt="" title="多功能菜单"/>-->
                    <div class="imgBox" style="right: 44px;top: 55px;" @click="demo_click(1)">
                            <img src="../../../assets/svg/txt.svg" alt="">
                    </div>
                    <div class="imgBox" style="right: 16px;top: 15px;" @click="demo_click(2)">
                        <el-badge :value="source" class="item" :max="99">
                            <img src="../../../assets/svg/time.svg" alt="">
                        </el-badge>
                    </div>
                    <div class="imgBox" style="right: 16px;top: 95px;" @click="demo_click(3)">
                            <img src="../../../assets/svg/tips.svg" alt="">
                    </div>
                </div>
                <!--  菜单  -->
                <div v-else></div>
            </div>
        </div>
        <div v-show="!menuFlag" class="imgBox" ref="menuicon" style="position:fixed;right: 75px;top: 380px;z-index: 90" @click="closeMenu">
            <el-badge :value="source" class="item" :max="99">
                <img style="width: 20px;height: 19px" src="../../../assets/svg/time.svg" alt="">
            </el-badge>
        </div>
    </div>

</template>

<script>
    export default {
        name: "homeDragbtn",
        props: {
            // 通过position来设置初始定位
            position: {
                type: Object,
                default: function() {
                    return {
                        top: "12.25rem",
                        right: "0"
                    }
                }
            }
        },
        data() {
            return {
                btnLoading:false,
                menuFlag:true,
                timeVal:"",
                countb:20,
                startpageb:1,
                startpagea:1,
                count: 20,
                loading: false,
                handleData:[],
                upcomingData:[],
                searcha:"",
                searchb:"",
                settime:false,
                activeName:'a',
                menuOpen:false,     //  菜单展开状态
                mouseDownState:false,   //  鼠标点击状态
                iX:0, iY:0,
                dX:0, dY:500,   //  初始定位
                lastMoveIndex:0,    //  拖拽计数
                curMoveIndex:0, //  历史计数
                sourcedbData:[],
                sourceybData:[],
                dbcount:"",
                ybcount:"",
                source:0
            }
        },
        computed: {
            noMore () {
                console.log(this.count,this.dbcount)
                return this.count >= this.dbcount
            },
            noMoreb () {
                return this.countb >= this.ybcount
            },

            updateList(){
                 return JSON.stringify(this.$store.state.app.websocketData)
            },
        },
        mounted(){
            let menuFlag = localStorage.getItem("menuFlag")
            if(menuFlag&&menuFlag=="true"){
                this.menuFlag = true
                this.$emit("getFlag",false)
            }else{
                this.menuFlag = false
                this.$refs.menuicon.style.top="15px"
                this.$refs.menuicon.style.right="75px"
                this.$emit("getFlag",true)
            }
            // this.getList()
        },

        methods: {
            handle(){
                this.btnLoading = true
                this.$http.put(`/${this.$ServiceName}/api/external/cloud/${this.$version}/updatebyreaccno`).then(res=>{
                        this.btnLoading = false
                        this.$message.success('办理成功！')
                        this.startpagea = 1
                        this.count = 20
                        this.loading = true
                        this.$http.get(`/${this.$ServiceName}/api/external/cloud/${this.$version}/queryall?startpage=${this.startpagea}&pagesize=20&target=01&isreader=0&msgtype=02`).then(res=>{
                            if(res.data.data){
                                this.loading = false
                                this.source = res.data.data.totalNum //维护最原始的条数防止与搜索条数冲突
                                this.upcomingData = res.data.data.pages
                            }
                        }).catch(()=>{
                            this.loading = false
                        })

                }).catch(()=>{
                    this.btnLoading = false
                })
            },
            closeMenu(){
                setTimeout(()=>{
                    this.$refs.menuicon.style.transition="all .5s"
                    this.$refs.menuicon.style.top="380px"
                    this.$refs.menuicon.style.right="75px"
                    setTimeout(()=>{
                        this.menuFlag = true
                        localStorage.setItem("menuFlag",'true')
                    },300)
                    this.$emit("getFlag",false)
                },300)

            },
            showMenu(){
                clearInterval(this.timeVal)
                this.menuFlag = false
                setTimeout(()=>{
                this.$refs.menuicon.style.transition="all .5s"
                this.$refs.menuicon.style.top="15px"
                this.$refs.menuicon.style.right="75px"
                this.$emit("getFlag",true)
                 localStorage.setItem("menuFlag",'false')
                },100)
            },
            load () {
                this.loading = true
                if(this.activeName == 'a'){
                    //待办
                    this.count += 20
                    this.startpagea +=1
                    this.$http.get(`/${this.$ServiceName}/api/external/cloud/${this.$version}/queryall?startpage=${this.startpagea}&pagesize=20&target=01&isreader=0&msgtype=02`).then(res=>{
                        if(res.data.data){
                            this.loading = false
                            this.source = res.data.data.totalNum //维护最原始的条数防止与搜索条数冲突
                            this.upcomingData = this.upcomingData.concat(res.data.data.pages)
                        }
                    })
                }else{
                    //已办
                    this.countb += 20
                    this.startpageb +=1
                    this.$http.get(`/${this.$ServiceName}/api/external/cloud/${this.$version}/queryall?startpage=${this.startpageb}&pagesize=20&target=01&isreader=1&msgtype=02`).then(res=>{
                        if(res.data.data){
                            this.loading = false
                            this.ybcount = res.data.data.totalNum
                            this.handleData = this.handleData.concat(res.data.data.pages)
                        }
                    })
                }

            },
            dbSearch(val){

                //待办搜索
                this.count = 20
                this.startpagea = 1
                this.$http.get(`/${this.$ServiceName}/api/external/cloud/${this.$version}/queryall?startpage=1&pagesize=20&target=01&isreader=0&content=${this.searcha?this.searcha:''}`).then(res=>{
                    if(res.data.data){
                        this.dbcount = res.data.data.totalNum
                        this.upcomingData = res.data.data.pages
                    }
                })


            },
            ybSearch(val){
               //已办搜索
                this.countb = 20
                this.startpageb = 1
                this.$http.get(`/${this.$ServiceName}/api/external/cloud/${this.$version}/queryall?startpage=1&pagesize=20&target=01&isreader=1&msgtype=02&content=${this.searchb?this.searchb:''}`).then(res=>{
                    if(res.data.data){
                        this.ybcount = res.data.data.totalNum
                        this.handleData = res.data.data.pages
                    }
                })


            },
            toPage(val,index){
                let newVal = JSON.parse(JSON.stringify(val))
                this.$router.push({path: newVal.route})
                this.$nextTick(() => {
                        this.$store.state.app.menuRouterId = newVal.routeArg
                })
                console.log('routerid',val,index,newVal.routeArg)

               // if(val.isReader!=0){
               //     return
               // }
                //纯消息
                if(!index&&index!=0){
                    return
                }
                this.$http.put(`/${this.$ServiceName}/api/external/cloud/${this.$version}/updatebyid`,{id:val.id}).then(res=>{
                    if(res.data.msg=='SUCCESS'){
                        // val.isReader = 1

                        console.log('ref--->',this.$refs.listItem[index])
                        this.$refs.listItem[index].style.transition="all .5s"
                        this.$refs.listItem[index].style.position="relative"
                        this.$refs.listItem[index].style.left="300px"
                        setTimeout(()=>{
                            this.$refs.listItem[index].style.transition="none"
                            this.$refs.listItem[index].style.position="inherit"
                            this.$refs.listItem[index].style.left="0"
                            this.upcomingData.splice(index,1)
                            this.handleData.push(val)
                            this.source -= 1
                            this.dbcount -= 1
                            this.ybcount += 1
                        },300)

                    }

                })
            },
            getList(){
                this.count = 20
                this.startpagea = 1
                this.countb = 20
                this.startpageb = 1
                //待办
                this.$http.get(`/${this.$ServiceName}/api/external/cloud/${this.$version}/queryall?startpage=1&pagesize=20&target=01&isreader=0&msgtype=02`).then(res=>{
                    if(res.data.data){
                        this.dbcount = res.data.data.totalNum
                        this.source = res.data.data.totalNum //维护最原始的条数防止与搜索条数冲突
                        this.upcomingData = res.data.data.pages
                    }
                })
                //纯消息
                this.$http.get(`/${this.$ServiceName}/api/external/cloud/${this.$version}/queryall?startpage=1&pagesize=20&target=01&isreader=1&msgtype=02`).then(res=>{
                    if(res.data.data){
                        this.ybcount = res.data.data.totalNum
                        this.handleData = res.data.data.pages
                    }
                })

            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            //  鼠标按下
            demo_down(event){
                //  如果打开了菜单，则不做响应
                if(this.menuOpen){
                    this.mouseDownState = false;
                    return
                }
                console.log("demo_down",event);
                /* 此处判断  pc 或 移动端 得到 event 事件 */
                var touch;
                if (event.touches) {
                    touch = event.touches[0];
                } else {
                    touch = event;
                }
                // 鼠标点击 面向页面 的 x坐标 y坐标
                let { clientX, clientY } = touch;
                // 鼠标x坐标 - 拖拽按钮x坐标  得到鼠标 距离 拖拽按钮 的间距
                this.iX = clientX - this.$refs.actionMgr.offsetLeft;
                // 鼠标y坐标 - 拖拽按钮y坐标  得到鼠标 距离 拖拽按钮 的间距
                this.iY = clientY - this.$refs.actionMgr.offsetTop;
                // 设置当前 状态为 鼠标按下
                this.mouseDownState = true;
            },
            //  鼠标拖拽
            demo_move(event){
                //鼠标按下 切移动中
                if (this.mouseDownState) {
                    console.log("demo_move",event);
                    /* 此处判断  pc 或 移动端 得到 event 事件 */
                    var touch;
                    if (event.touches) {
                        touch = event.touches[0];
                    } else {
                        touch = event;
                    }
                    // 鼠标移动时 面向页面 的 x坐标 y坐标
                    let { clientX, clientY } = touch;
                    //当前页面全局容器 dom 元素  获取容器 宽高
                    let {
                        clientHeight: pageDivY,
                        clientWidth: pageDivX
                    } = this.$refs.pageDiv;
                    /* 鼠标坐标 - 鼠标与拖拽按钮的 间距坐标  得到 拖拽按钮的 左上角 x轴y轴坐标 */
                    let [x, y] = [clientX - this.iX, clientY - this.iY];

                    //拖拽按钮 dom 元素  获取 宽高 style 对象
                    let {
                        clientHeight: actionMgrY,
                        clientWidth: actionMgrX,
                        style: actionMgrStyle
                    } = this.$refs.actionMgr;
                    /* 此处判断 拖拽按钮 如果超出 屏幕宽高 或者 小于
                       设置 屏幕最大 x=全局容器x y=全局容器y 否则 设置 为 x=0 y=0
                    */
                    if (x > pageDivX - actionMgrX) x = pageDivX - actionMgrX;
                    else if (x < 0) x = 0;
                    if (y > pageDivY - actionMgrY) y = pageDivY - actionMgrY;
                    else if (y < 0) y = 0;
                    this.dX =x;this.dY = y;
                    // 计算后坐标  设置 按钮位置
                    // actionMgrStyle.left = `${x}px`;
                     actionMgrStyle.left = `auto`;
                    actionMgrStyle.top = `${y}px`;
                    actionMgrStyle.bottom = "auto";
                    // actionMgrStyle.right = "auto";
                    actionMgrStyle.right = "0px";
                    //  move Index
                    this.lastMoveIndex++;
                    //  当按下键滑动时， 阻止屏幕滑动事件
                    event.preventDefault();
                }
            },
            //    鼠标抬起
            demo_up(event){
                console.log("demo_up",event);
                //  当前页面全局容器 dom 元素  获取容器 宽高
                let {
                    clientHeight: windowHeight,
                    clientWidth: windowWidth
                } = document.documentElement;
                console.log('全局容器:',windowWidth,windowHeight);
                //  拖拽按钮 dom 元素  获取 宽高 style 对象
                let {
                    clientHeight: actionMgrY,
                    clientWidth: actionMgrX,
                    style: actionMgrStyle
                } = this.$refs.actionMgr;

                console.log('拖拽按钮',actionMgrY,actionMgrX,actionMgrStyle);
                // // 计算后坐标  设置 按钮位置
                // if(this.dY>0&&this.dY<(windowHeight-50)){ //  不在顶部 且 不在底部
                //     if(this.dX<=(windowWidth/2)){  //  left 小于等于屏幕一半
                //         actionMgrStyle.left = 0;
                //         actionMgrStyle.right = 'auto';
                //     }else { //  left 大于屏幕一半
                //         actionMgrStyle.left = 'auto';
                //         actionMgrStyle.right = 0;
                //     }
                //     if(this.dY>=(windowHeight/2)){   //  宽度大于1/2时，是将top改为auto，调整bottom
                //         actionMgrStyle.top = 'auto';
                //         actionMgrStyle.bottom = (windowHeight - this.dY - 50) + 'px';
                //     }
                // }else {
                //     if(this.dY===0){  //  在顶部
                //         actionMgrStyle.top = 0;
                //         actionMgrStyle.bottom = 'auto';
                //     }else if(this.dY===(windowHeight-50)){
                //         actionMgrStyle.bottom = 0;
                //         actionMgrStyle.top = 'auto';
                //     }
                //     if(this.dX>=(windowWidth/2)){  //  右侧是将left改为auto，调整right
                //         actionMgrStyle.left = 'auto';
                //         actionMgrStyle.right = (windowWidth - this.dX - 50) + 'px';
                //     }
                // }
                actionMgrStyle.left = 'auto';
                actionMgrStyle.right = '0px'
                this.mouseDownState = false;
            },
            //    单击事件
            demo_click(type){
                clearInterval(this.timeVal)
                this.timeVal = setTimeout(()=>{
                    if(type==3){
                        this.$emit('openMsg')
                        return
                    }
                    //  mouseup 后会激活click事件
                    //  如果上一次down事件到下一次click事件中经历10次以下move，则视为纯点击事件
                    // if(this.lastMoveIndex-this.curMoveIndex<=10){
                    //  点击事件
                    this.menuOpen = !this.menuOpen;
                    if( this.menuOpen ){
                        //  打开菜单
                        if(type==1){
                            this.activeName = 'b'
                        }
                        if(type==2){
                            this.activeName = 'a'
                        }

                    }
                    // }
                    this.curMoveIndex = this.lastMoveIndex
                },300)

            },
            //    点击空白关闭菜单
            closeOpenModal(){
                this.menuOpen = false;
            }
        },
        watch:{
            menuOpen(val){
                if(val){
                    setTimeout(()=>{
                        this.settime = true
                    },400)
                }else{
                    this.settime = false
                }
            },
            updateList(){
                console.log(JSON.parse(this.updateList).messageContext)
                if(JSON.parse(this.updateList).messageContext&&JSON.parse(this.updateList).messageContext.msgType=='02'){
                    this.getList()
                }
            }
        }
    }
</script>
<style scoped lang="less">
    /deep/.el-tabs__header{
        margin: 0;
    }
    .zlevelTop{
        z-index: 999999;
    }
    .more-tran-animate{
    }
    .moreModal {
        /* 如果碰到滑动问题，1.3 请检查 z-index。z-index需比web大一级*/
        z-index: 999999;
        position: fixed;
        width: 83px;
        height: 150px;
        /*border-radius: 63%;*/
        background-color: white;
        line-height: 40px;
        text-align: center;
        color: #fff;
        opacity: 0.7;
        background: url('../../../assets/img/homeMenu.png');
        background-repeat: no-repeat;
        background-size:100% 100%;
        transition:0.5s opacity;

        /*box-shadow: 0px 1px 5px -1px #9a9a9a;*/
    }
    .moreModal:hover{
        opacity: 1;
    }
    .six-more-modal-btn{
        transition:0.5s;

        position: fixed;
        z-index: 999999;
        width: 18rem;
        min-height: 25rem;
        border-radius: 5px;
        background: white;
        box-shadow: 0px 0px 6px -1px #9a9a9a;
        color: #fff;
    }
    .imgMore{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

    }
    .imgBox{
        position: absolute;
        cursor: pointer;
        z-index: 9999999;
    }
    .text{
        background: white;
        /*border-bottom: .5px solid #c8cfde;*/
        padding: 0px 5px 0 10px;
        margin-bottom: 15px;
        border-radius: 10px;
        cursor: pointer;
        left: 0;
    }
    .text:hover{
        box-shadow: 0px 0px 6px -1px #9a9a9a;
        transition: .5s;
    }
    .listHeader{
        display: flex;
        justify-content: space-between;
        height: 30px;
        align-items: flex-end;
    }
    .listTittle{
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: #272E45;
    }
    .listTime{
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #666666;
    }
    .listBody{
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #999999;
        min-height: 40px;
    }
    /deep/.el-card__body{
        padding: 10px;
    }
    /deep/.is-dot {
        left: -13px!important;
        top: 1px!important;
    }
</style>
